<template>
  <div class="container">
    <div class="friends-page">
      <div class="search">
        <div class="box">
          <div class="icon">
            <img class="image" src="/static/images/icon/search.png" alt="">
          </div>
          <div class="content">
            <input type="text" v-model="search.name" placeholder="请输入搜索内容">
          </div>
          <div class="btn" @click="searchName">搜索</div>
        </div>
      </div>
      <div class="body">
        <ul class="list" v-if="list.length > 0">
          <li class="item" v-for="(item, index) in list" :key="index" @click="router(item.id)">
            <div class="avatar">
              <img class="image" :src="item.avatarUrl" alt="">
            </div>
            <div class="user">
              <div class="nick">{{ item.nickName }}</div>
              <div class="job">{{ item.company ? item.company.title ? item.company.title : '' : '' }}</div>
            </div>
            <div class="content">
              <div class="icon">
                <img class="image" src="/static/images/icon/location.png" alt="">
              </div>
              <div class="text">{{ item.address }}</div>
            </div>
          </li>
          <li class="nomore" v-if="isLock">我是有底线的</li>
        </ul>
        <div class="data-empty" v-else>
          <image class="icon-empty" src="/static/images/icon/empty.png" alt=""/>
        </div>
      </div>
      <div class="footer">
        <div class="icon">
          <img class="image" src="/static/images/icon/top.png" alt="">
        </div>
        <div class="content">
          <div>名片快速置顶</div>
          <div class="text">名片置顶，将有利于商业伙伴快速找到您</div>
        </div>
        <div class="btn" @click="top">立即置顶</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      search: {
        name : ''
      },
      list: [],
      page: 1,
      isLock: false,
    }
  },

  onShareAppMessage (res) {
    let self = this;
    let url = `${self.$confs.shareUrl}?id=${self.userInfo.id}`;
    return {
      title: self.$confs.shareTitle,
      path: url
    }
  },

  computed: {
    userInfo () {
      return this.$store.state.userInfo;
    },
    isVip () {
      return this.$store.state.isVip;
    },
  },

  methods: {
    /**
     * 查询
     */
    searchName(){
      let self = this;
      self.$toast.show();
       self.$axios.getTops({
         name : self.search.name
       }).then(res=>{
          self.$toast.hide();
          if (0 === res.data.code * 1) {
            self.list = res.data.data;
          }else {
            self.$modal.show('数据加载失败!');
          }
        })
    },
    /*
     * 置顶
     */
    top () {
      let self = this;
      if (self.isVip) {
        self.$toast.show('置顶中...');
        self.$axios.refreshTop().then(res => {
          if ( 0 === res.data.code * 1) {
            self.$axios.getTops({
                name : self.search.name
              }).then(res=>{
              self.$toast.show({
                title: '置顶成功',
                icon: 'success',
                duration: 1500,
              });
              if (0 === res.data.code * 1) {
                self.list = res.data.data;
              }else {
                self.$modal.show('数据加载失败!');
              }
            })
          }else {
            self.$toast.hide();
            self.$modal.show('数据加载失败!');
          }
        })
      }
      else {
        self.$modal.show({
          title: '请开通会员！',
          content: '开通会员，畅想无限置顶，线下主动分享名片不如等着百万群体预览您的名片！',
          confirmText: '开通会员',
          success: (res) => {
            if (res.confirm) {
              wx.navigateTo({
                url: '/pages/openVip/main'
              });
            }
          },
        });
      }
    },
    router (id) {
      let url = `/pages/guest/main?id=${id}`;
      wx.navigateTo({url});
    },
    init(){
      this.$toast.show();
      this.$axios.getTops({
        page: this.page,
        name : this.search.name
      }).then(res=>{
        this.$toast.hide();
        if (0 === res.data.code * 1) {
          this.list = res.data.data;
        }else {
          this.$modal.show('数据加载失败!');
        }
      })
    }
  },
  /*
  * 页面上拉触底事件的处理函数
  */
  onReachBottom: function () {
    let self = this;
    if (!self.isLock) {
      self.$toast.show('玩命加载中');
      self.page += 1;
      self.$axios.getTops({
        page: self.page,
        name : self.search.name
      }).then(res=>{
        self.$toast.hide();
        if (0 === res.data.code * 1) {
          if (res.data.data.length > 0) {
            self.list.push(...res.data.data);
          } else {
            self.isLock = true;
          }
        }else {
          self.$modal.show('数据加载失败!');
        }
      })
    }
  },

  mounted () {
    this.init();
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
